var watermark = (className: string,str: string,type: string) => {
    let dom = document.getElementsByClassName(className)
    let canvas = document.createElement('canvas')
    let cxt = canvas.getContext('2d')
    let div = document.createElement('div')
    
    let imgScale = 0.6
    //canvas.width = 200
    canvas.width = 2000
    canvas.height = 1000
    if(type == 'text'){
        if(cxt){
            cxt.font = '16px Microsoft JhengHei'
            cxt.fillStyle = 'rgba(200, 200, 200, 0.3)'
            cxt.textAlign = 'left'
            cxt.textBaseline = 'middle'
            cxt.fillText(str, 10, 50)
            cxt.clearRect(0, 0, canvas.width, canvas.height);
        }
 
       div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
       console.log("文字水印已添加");
       drawImage(div,dom)  
    }else{
        // console.log(str);
        //创建新的图片对象
        let img = new Image();
        //指定图片的URL
        img.src = str
        //浏览器加载图片完毕后再绘制图片
        img.onload = function() {
            //cxt.drawImage(img,0,0);

            if(cxt){
                cxt.rotate(-20 * Math.PI / 180)
                let whScale = img.width / img.height
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                //  cxt.drawImage(img, //规定要使用的图像、画布或视频。
                //                 0, 0, //开始剪切的 x 坐标位置。
                //                 img.width, img.height,  //被剪切图像的高度。
                //                 0, 50,//在画布上放置图像的 x 、y坐标位置。
                //                 img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
                //                 )
                cxt.drawImage(img, //规定要使用的图像、画布或视频。
                                0, 0, //开始剪切的 x 坐标位置。
                                img.width, img.height,  //被剪切图像的高度。
                                430, 800,//在画布上放置图像的 x 、y坐标位置。
                                img.width * 1.5, img.height * 2  //要使用的图像的宽度、高度
                                )
                div.style.opacity = '0.05'
                div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
                // div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top'

            }
 
            drawImage(div,dom) 
        }
    }
}
var drawImage = function (div: HTMLDivElement,dom: string | any[] | HTMLCollectionOf<Element>) {
    div.style.pointerEvents = 'none'
      div.className = 'weterbox'
      div.style.top = '0'
      div.style.left = '0'
      div.style.position = 'absolute'
      div.style.zIndex = '100000'
      // width height代表水印的宽度和高度
      div.style.width = '100%'
      div.style.height = '100%'
      //调一下透明度
    //   div.style.opcity='0.4'
    // console.log(dom) 
    if( dom.length > 0){
        for(let i = 0; i< dom.length;i++){
            let child = dom[i].getElementsByClassName('weterbox')
            if(child.length > 0){
                dom[i].removeChild(child[0])
            }
            dom[i].appendChild(div.cloneNode(true))
        //    console.log(i,dom[i])
        }
    }
}
 
export default watermark